/* 改变主题色变量 */
$--color-primary: #409EFF;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  background: #f6f6f6;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

div:focus {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

//main-container全局样式
.app-main {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  overflow: scroll;
  bottom: 0;
}

.app-container {
  padding: 20px;
}

.pull-right {
  float: right
}

.el-menu-item, .el-submenu__title {
  height: 36px;
  line-height: 36px;
}

.el-submenu .el-menu-item {
  height: 30px;
  line-height: 30px;
}

.el-form .el-select {
  display: block;
}

.list-box {
  margin: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  > div {
    margin-right: 15px;

  }
}

.list-item {
  transition: 0.2s all;
  width: 240px;
  margin-top: 15px;
  cursor: pointer;
  position: relative;
  .item-body {
    padding: 5px 10px;
    height: 120px;
    width: 240px;
    background-size: cover;
    background: url(/static/images/p0.jpg);
    color: #fff;
    .item-right-bottom {
      position: absolute;
      right: 15px;
      bottom: 15px;
      font-size: 12px;
    }
    &:hover {
      .item-tools {
        display: inline-block;

      }
    }
  }
  .image {
    height: 140px;
    width: 100%;
  }
  .item-title {
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item-title-text {
      display: inline-block;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .item-tools {
      display: none;
      color: #fff;
      > span {
        cursor: pointer;
        &:hover {
          color: #f5f5f5;
        }
      }
    }
  }
  .item-sub-title {
    margin-top: 15px;
    color: #eee;
    font-size: 12px;
  }
  &:hover {
    margin-top: 10px;
    padding-bottom: 5px;
  }
}

.app-content-view {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  overflow: auto;
  &.overflow-hidden {
    overflow: hidden;
  }
}

.topbar {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 46px;
  border-bottom: 1px solid #eee;
  box-shadow: 0 5px 5px hsla(0, 0%, 87%, .22);
  background: #fff;
  z-index: 1002;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > div {
    display: flex;
    padding: 0 10px;
    align-items: center;
    > * {
      margin: 0 5px;
    }
  }
  .web-title {
    line-height: 46px;
    white-space: nowrap;
  }
}

h3.list-title {
  color: #666;
  border-bottom: 1px solid #e6e6e6;
  font-size: 20px;
  font-weight: normal;
  padding: 20px 0 10px;
  margin: 0;
  display: flex;
  justify-content: space-between;
  .el-button.is-circle {
    margin: 0;
  }
}

.box-item-plus {
  text-align: center;
  .box-item-plus-body {
    padding-top: 15px;
    height: 120px;
    color: #666;
    &:hover {
      &, i {
        color: $activeColor
      }
    }
  }
  i {
    font-size: 40px;
    line-height: 60px;
    color: #999;

  }

}

.app-wrapper {
  @include clearfix;
  position: relative;
  width: 100%;
  height: 100%;
}

.title-code {
  color: #888;
  font-size: 14px;
  margin-left: 10px;
}

.flex {
  display: flex;
  align-items: center;
}

.batch-opera {

  .el-form-item {
    margin-bottom: 15px;
  }
}

.left-menu-module-list {
  .left-menu-module-item {
    cursor: pointer;
    padding: 10px 15px 0;
    color: #666;
    &:hover, &.active {
      background: #f6f6f6;
      color: $activeColor
    }
    .left-menu-module-title {

      margin: 0;
      padding: 0;
      font-size: 16px;
    }
    .left-menu-module-item-tools {
      border-bottom: 1px solid #e7e7e7;
    }
    .el-button--text {
      color: #666;
      &:hover {
        color: $activeColor
      }
    }
  }
}

.hideSidebar {
  .left-menu-module-item {
    padding-bottom: 10px;
  }
}

.left-menu-add-button {
  border: 1px solid #eee;
  margin: 20px;
  padding: 30px 15px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  color: #999;
  i {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
  }
  &:hover {
    color: $activeColor;
    border-color: $activeColor*1.3;
  }
}

.popover-item-list {
  padding-bottom: 10px;
  > div {
    padding: 5px 0;
  }
}

.pagination {
  text-align: center;
  padding: 15px 0;
}

.page-main {
  background: #fff;
  margin: 10px;
  padding: 10px;
}

.list-bar-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.table-expand-form {
  border: 1px dashed #ccc;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  .el-form-item {
    margin-right: 20px;
    margin-bottom: 0;
    label {
      color: #999
    }
  }

}
.list-bar-tools-input{
  width:320px;
  margin-right:10px;
}
.el-table th > .cell{
  white-space: nowrap;
}
